<template>
  <svg 
    :width="size" 
    :height="size" 
    viewBox="0 0 64 64" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
    :class="className"
  >
    <!-- 背景渐变 -->
    <defs>
      <linearGradient id="logo-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
      </linearGradient>
    </defs>
    
    <!-- 圆角矩形背景 -->
    <rect width="64" height="64" rx="12" fill="url(#logo-grad)"/>
    
    <!-- 工具箱图标 -->
    <!-- 箱体 -->
    <rect x="14" y="26" width="36" height="24" rx="2" fill="white" opacity="0.95"/>
    
    <!-- 手柄 -->
    <path d="M 28 26 Q 32 22 36 26" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>
    
    <!-- 工具符号 -->
    <!-- 扳手 -->
    <path d="M 22 34 L 26 38" stroke="#4F46E5" stroke-width="2" stroke-linecap="round"/>
    <circle cx="22" cy="34" r="1.5" fill="#4F46E5"/>
    
    <!-- 螺丝刀 -->
    <line x1="32" y1="32" x2="32" y2="40" stroke="#7C3AED" stroke-width="2" stroke-linecap="round"/>
    <rect x="31" y="30" width="2" height="3" fill="#7C3AED"/>
    
    <!-- 锤子 -->
    <line x1="42" y1="34" x2="38" y2="38" stroke="#4F46E5" stroke-width="2" stroke-linecap="round"/>
    <rect x="40.5" y="31.5" width="3" height="3" fill="#4F46E5" transform="rotate(45 42 33)"/>
    
    <!-- 导航箭头装饰 -->
    <path d="M 52 16 L 56 20 L 52 24" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
  </svg>
</template>

<script setup lang="ts">
defineProps<{
  size?: number | string
  className?: string
}>()
</script>

